<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="这是一个示例网页，展示现代HTML5和CSS3的最佳实践">
    <title>现代网页示例</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<body>
    <header>
        <nav>
            <div class="container">
                <a href="/" class="logo">我的网站</a>
                <ul class="nav-links">
                    <li><a href="#features">功能</a></li>
                    <li><a href="#about">关于</a></li>
                    <li><a href="#contact">联系</a></li>
                </ul>
                <button class="menu-toggle" aria-label="切换导航菜单">
                    <span class="hamburger"></span>
                </button>
            </div>
        </nav>
    </header>

    <main>
        <section id="hero">
            <div class="container">
                <h1>欢迎来到现代网页开发</h1>
                <p>探索HTML5、CSS3和JavaScript的强大功能</p>
                <a href="#features" class="cta-button">了解更多</a>
            </div>
        </section>

        <section id="features" class="section-padding">
            <div class="container">
                <h2>主要功能</h2>
                <div class="features-grid">
                    <article class="feature-card">
                        <i class="fas fa-mobile-alt"></i>
                        <h3>响应式设计</h3>
                        <p>完美适配各种设备，从手机到桌面</p>
                    </article>
                    <article class="feature-card">
                        <i class="fas fa-rocket"></i>
                        <h3>高性能</h3>
                        <p>优化加载速度，提升用户体验</p>
                    </article>
                    <article class="feature-card">
                        <i class="fas fa-cogs"></i>
                        <h3>可维护性</h3>
                        <p>清晰的代码结构，易于扩展和维护</p>
                    </article>
                </div>
            </div>
        </section>

        <section id="about" class="section-padding">
            <div class="container">
                <h2>关于我们</h2>
                <p>我们是一支专注于现代网页技术的团队，致力于打造卓越的用户体验。</p>
            </div>
        </section>

        <section id="contact" class="section-padding">
            <div class="container">
                <h2>联系我们</h2>
                <form id="contact-form">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">留言</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="submit-button">发送</button>
                </form>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 我的公司. 保留所有权利.</p>
            <ul class="social-links">
                <li><a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                <li><a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a></li>
            </ul>
        </div>
    </footer>

    <script src="scripts.js"></script>
</body>
</html>